<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          文章分类管理
          <el-button :icon="Plus" @click="addDialog.open = true" circle class="float-right" />
        </div>
      </template>
      <el-table :data="data.page.records" style="width: 100%">
        <el-table-column prop="articleTypeId" label="文章分类编号" width="180" />
        <el-table-column prop="articleTypeName" label="文章分类名称" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button-group>
              <el-button size="small" type="warning" @click="
  updateDialog.open = true;
updateDialog.form = scope.row;
              ">
                修改
              </el-button>
              <el-button size="small" type="danger" @click="doDelete(scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>


    </el-card>

    <el-pagination
      style="justify-content: center;"
     v-model:currentPage="data.params.current" v-model:page-size="data.params.size"
      :page-sizes="[2, 5, 10, 20, 50]" background layout="total, sizes, prev, pager, next, jumper"
      :total="Number(data.page.total)" @size-change="doPage(1);" @current-change="doPage();" />
    <!-- 添加对话框 -->
    <el-dialog v-model="addDialog.open" title="添加对话框" width="30rem" draggable>
      <el-form ref="addForm" :model="addDialog.form" label-width="8em" label-position="right" size="large" status-icon>
        <!-- 自增字段,不需要客户输入
        <el-form-item label="文章分类编号" prop="articleTypeId" :rules="[
          { required: true, message: '文章分类编号必填' },
          { min: 3, max: 10, message: '文章分类编号必须由3-10个字符组成' },
          { pattern: /^[a-z]+$/, message: '文章分类编号必须为小写字母' },
        ]">
          <el-input v-model="addDialog.form.articleTypeId" />
        </el-form-item>-->
        <el-form-item label="文章分类名称" prop="articleTypeName" :rules="[
          { required: true, message: '文章分类名称必填' },
          {
            pattern: /^[\u0391-\uFFE5]{2,10}$/,
            message: '文章分类名称必须为2-10个汉字组成',
          },
        ]">
          <el-input v-model="addDialog.form.articleTypeName" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="doAdd">添加</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog v-model="updateDialog.open" title="修改对话框" width="30rem" draggable>
      <el-form ref="updateForm" :model="updateDialog.form" label-width="8em" label-position="right" size="large"
        status-icon>
        <el-form-item label="文章分类编号">
          {{ updateDialog.form.articleTypeId }}
        </el-form-item>
        <el-form-item label="文章分类名称" prop="articleTypeName" :rules="[
          { required: true, message: '文章分类名称必填' },
          {
            pattern: /^[\u0391-\uFFE5]{2,10}$/,
            message: '文章分类名称必须为2-10个汉字组成',
          },
        ]">
          <el-input v-model="updateDialog.form.articleTypeName" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="doUpdate">修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>













<script setup>
import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import articleTypeApi from "@/api/cms/ArticleTypeApi";

// const roleList = reactive({});
const data = reactive({
  params: {
    current: 1,//当前页码
    size: 5,//每页最大数
  },
  page: {//分页结果
    total: 0,//总记录数
    records: [],//记录
  }
}); //定义复制的响应式数据

/**
 * 加载第p页数据
 * @param {Number} p 
 */
const doPage = (p) => {
  if (p) {
    data.params.current = p
  }
  articleTypeApi.page(data.params).then(r => {
    data.page = r.data.data;
  });
}


/**
 * 组件挂载事件
 */
onMounted(() => {
  doPage(1);
});

/// 添加对话框处理
const addDialog = reactive({
  open: false, //对话框是否打开的
  form: {},
});
const addForm = ref(null);
const doAdd = () => {
  console.debug(addForm.value);
  addForm.value.validate((valid) => {
    if (valid) {
      //校验成功
      articleTypeApi.add(addDialog.form).then((r) => {
        if (r.data.ok) {
          ElMessage.success("添加成功"); //1.成功提示
          doPage(1); //2.调用加载数据的方法,刷新页面数据
          addForm.value.resetFields(); //3.重置表单
          addDialog.open = false; //4.关闭对话框
        }
      });
    } else {
      ElMessage.error("校验失败");
    }
  });
};

/// 修改对话框处理
const updateDialog = reactive({
  open: false, //对话框是否打开的
  form: {},
});
const updateForm = ref(null);
const doUpdate = () => {
  updateForm.value.validate((valid) => {
    if (valid) {
      //校验成功
      articleTypeApi.update(updateDialog.form).then((r) => {
        if (r.data.ok) {
          ElMessage.success("修改成功"); //1.成功提示
          doPage(1); //2.调用加载数据的方法,刷新页面数据
          updateDialog.open = false; //3.关闭对话框
        }
      });
    } else {
      ElMessage.error("校验失败");
    }
  });
};

// 删除处理
const doDelete = (row) => {
  ElMessageBox.confirm(`您确定要删除[${row.articleTypeName}]吗?`, "删除确认")
    .then(() => {
      return articleTypeApi.delete(row.articleTypeId);
    })
    .then((r) => {
      if (r.data.ok) {
        ElMessage.success("删除成功"); //1.成功提示
        doPage(1); //2.调用加载数据的方法,刷新页面数据
      }
    });
};
</script>

<style  scoped>
.box-card {
  width: 600px;
  margin: 1rem auto;
}

.float-right {
  float: right;
}
</style>